<template>
<div class="app-container">
  <div style="margin-top: 1px">
    <el-row>
      <el-col :span="18">
        <el-form :model="listQuery" inline size="small" label-width="80px">
          <el-form-item label="关键词:">
            <el-input
              style="width: 150px"
              v-model="listQuery.keyword"
              placeholder="输入关键词"
            ></el-input>
          </el-form-item>
          <el-button type="primary" size="small" @click="handleSearch">
            搜索
          </el-button>
        </el-form>
      </el-col>
    </el-row>
  </div>

  <div class="table-container">
    <el-table
      ref="studentTable"
      :data="list"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-loading="listLoading"
      fit
    >
      <el-table-column label="商品名称" align="center" min-width="15%">
        <template slot-scope="scope">
          <p>{{ scope.row.goodName }}</p>
        </template>
      </el-table-column>
      <el-table-column label="商品类型" align="center" min-width="10%">
        <template slot-scope="scope">
          {{ scope.row.typeId === 1 ? '电子产品':'生活用品'}}
        </template>
      </el-table-column>
      <el-table-column label="商品描述" align="center" min-width="30%">
        <template slot-scope="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column label="参考价格" align="center" min-width="15%">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column label="是否售出" align="center" min-width="15%">
        <template slot-scope="scope">
          {{scope.row.isSold === false ?'未售出':'已售出'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="20%">
        <template slot-scope="scope">
          <el-tooltip
            :enterable="false"
            class="item"
            effect="light"
            content="编辑"
            placement="top"
          >
            <el-button
              size="mini"
              icon="el-icon-edit-outline"
              @click="handleUpdateProduct(scope.$index, scope.row)"
              circle
            >
            </el-button>
          </el-tooltip>
          <el-tooltip
            :enterable="false"
            class="item"
            effect="light"
            content="下架 "
            placement="top"
          >
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-refresh"
              @click="handleDown(scope.$index, scope.row)"
              circle
            >
            </el-button>
          </el-tooltip>
          <el-tooltip
            :enterable="false"
            class="item"
            effect="light"
            content="删除"
            placement="top"
          >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-delete"
              circle
            >
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination-container">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes,prev, pager, next,jumper"
      :page-size="listQuery.pageSize"
      :page-sizes="[5, 10, 15]"
      :current-page.sync="listQuery.pageNum"
      :total="total"
    >
    </el-pagination>
  </div>
  <el-dialog
    :title="form.id ? '查看商品详情' : '新增商品'"
    :visible.sync="dialogVisible"
    width="30%"
    @close="dialogVisible = false"
  >
    <el-form label-width="80px" size="normal">
      <el-form-item label="商品名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input
          v-model="form.desc"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
        ></el-input>
      </el-form-item>
      <el-form-item label="参考价格">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
  </el-dialog>
</div>
</template>

<!--TODO: 完善学生管理页面-->

<script>
import {
  getStudentList,
  updateDeleteStatus,
  getGoodList
} from '../../../api/admin'
const defaultListQuery = {
  keyword: null,
  type: -1,
  pageNum: 1,
  pageSize: 10,
};
const defaultForm = {
  id: null,
  dialogVisible: false,
  studentNum: null,
  classname: null,
  name: null,
  phone: null,
  email: null,
  groupId: null,
};

export default {
  name: "goodList",
  data() {
    return {
      form: Object.assign({}, defaultForm),
      queryModel: { keyword: null },
      list: null,
      listLoading: null,
      operateType: null,
      operateTypeDialog: "modify", // 创建，修改 modify, create
      operates: [
        {
          label: "删除",
          value: "delete",
        },
      ],
      listQuery: Object.assign({}, defaultListQuery),
      total: null,
      multipleSelection: [],
      modifyRowIndex: null,
      terms: [],
      uploadFile: null,
      dialogVisible: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    refresh() {
      this.getList();
    },
    handleSearch() {
      this.listQuery.pageNum = 1;
      this.getList();
      this.$message({
        message: "查询成功",
        type: "success",
        duration: 1000,
      });
    },
    handleReSearch() {
      this.listQuery.keyword = "";
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleUpdateProduct(index, row) {
      this.operateTypeDialog = "modify";
      this.form = JSON.parse(JSON.stringify(row))
      this.modifyRowIndex = index;
    },
    handleDelete(index, row) {
      this.$confirm("是否要进行删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let ids = [];
        ids.push(row.id);
        this.updateDeleteStatus(1, ids);
      });
    },
    handleDown() {
      this.$confirm("是否要进行下架操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message.success("操作成功!");
        this.getList();
      });
    },
    updateDeleteStatus(deleteStatus, ids) {
      let params = new URLSearchParams();
      params.append("ids", ids);
      params.append("deleteStatus", deleteStatus);
      updateDeleteStatus(params).then((response) => {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 1000,
        });
        // 当前页面全部删除 同时 是最后一页. 就自动的跳转到前一页
        getStudentList(this.listQuery).then((res) => {
          if (res.data.list.length === 0 && this.list.pageNum >= 1) {
            this.listQuery.pageNum--;
            this.getList();
          } else {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        });
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    getList() {
      this.listLoading = 1;
      getGoodList(this.listQuery).then((resp) => {
        this.listLoading = false;
        this.list = resp.data.list;
      });
    },
    handleChange(file) {
      this.uploadFile = file.raw;
      this.$refs["upload-button"].disabled = false;
      return false;
    },
  },
};
</script>

<style scoped>
.upload-excel {
}
</style>
